<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="ajax,jquery,省市联动" />
<title>jquery.cityselect.js基于jQuery+JSON的省市联动效果</title>
<link rel="stylesheet" type="text/css" href="/webjars/cityselect/css/main.css" th:href="@{/webjars/cityselect/css/main.css}" />
<style type="text/css">
.demo {
	width: 80%;
	margin: 20px auto
}

.demo h3 {
	height: 32px;
	line-height: 32px
}

.demo p {
	line-height: 24px
}

pre {
	margin-top: 10px;
	padding: 6px;
	background: #f7f7f7
}
</style>
<script type="text/javascript" src="js/jquery.js" th:src="@{/webjars/jquery/jquery.js}"></script>
<script type="text/javascript" src="js/jquery.cityselect.js" th:src="@{/webjars/cityselect/js/jquery.cityselect.js}"></script>
<!-- city.min.json 是 2010年以前的数据，已经过时，这里仅作为数据格式展示 -->
<script type="text/json" id="json" src="js/city.min.json" th:src="@{/webjars/cityselect/js/city.min.json}"></script>
<!-- 后台请求路径，返回json格式数据 -->
<script type="text/data-json" id="serverjson" src="js/city.min.json" th:src="@{/demo/dict/cityselect/json}"></script>
<script type="text/javascript" th:inline="javascript">
	$(function() {
		$("#city_1").citySelect({
			nodata : "none",
			required : false,
			url : $("#json").prop("src")
		});
		$("#city_2").citySelect({
			prov : "北京",
			nodata : "none",
			url : $("#json").prop("src")
		});

		$("#city_3").citySelect({
			prov : "湖南",
			city : "长沙",
			url : $("#json").prop("src")
		});
		$("#city_4").citySelect({
			prov : "湖南",
			city : "长沙",
			dist : "岳麓区",
			nodata : "none",
			url : $("#json").prop("src")
		});

		$("#city_5").citySelect({
			url : {
				"citylist" : [ {
					"p" : "前端技术",
					"c" : [ {
						"n" : "HTML"
					}, {
						"n" : "CSS",
						"a" : [ {
							"s" : "CSS2.0"
						}, {
							"s" : "CSS3.0"
						} ]
					}, {
						"n" : "JAVASCIPT"
					} ]
				}, {
					"p" : "编程语言",
					"c" : [ {
						"n" : "C"
					}, {
						"n" : "C++"
					}, {
						"n" : "Objective-C"
					}, {
						"n" : "PHP"
					}, {
						"n" : "JAVA"
					} ]
				}, {
					"p" : "数据库",
					"c" : [ {
						"n" : "Mysql"
					}, {
						"n" : "SqlServer"
					}, {
						"n" : "Oracle"
					}, {
						"n" : "DB2"
					} ]
				}, ]
			},
			prov : "",
			city : "",
			dist : "",
			nodata : "none"
		});
		//
		$("#city_6").citySelect({
			prov : "",
			city : "",
			dist : "",
			nodata : "none",
			url : $("#serverjson").prop("src")
		});
	});
</script>
</head>
<body>
	<div id="main">
		<h2 class="top_title">jquery.cityselect.js基于jQuery+JSON的省市联动效果</h2>
		<div class="demo">
			<h3>直接调用</h3>
			<p>二级联动，默认选项为：请选择</p>
			<div id="city_1">
				<select class="prov"></select> <select class="city" disabled="disabled"></select>
			</div>
			<p>三级联动，默认省份：北京，隐藏无数据的子级select</p>
			<div id="city_2">
				<select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select>
			</div>
			<pre>
					$("#city_1").citySelect({nodata:"none",required:false}); 
					$("#city_2").citySelect({prov:"北京",nodata:"none"});
				</pre>
		</div>
		<div class="demo">
			<h3>设置省份、城市、地区（县）的默认值</h3>
			<p>二级联动</p>
			<div id="city_3">
				<select class="prov"></select> <select class="city" disabled="disabled"></select>
			</div>
			<p>三级联动</p>
			<div id="city_4">
				<select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select>
			</div>
			<pre>
					$("#city_3").citySelect({prov:"湖南", city:"长沙"});
					$("#city_4").citySelect({prov:"湖南", city:"长沙", dist:"岳麓区"}); 
				</pre>
		</div>
		<div class="demo">
			<h3>自定义下拉选项</h3>
			<div id="city_5">
				<select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select>
			</div>
			<pre>
					$("#city_5").citySelect({
					url:{"citylist":[
					{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
					{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
					{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
					]},
					prov:"",
					city:"",
					dist:"",
					nodata:"none"
					});
				</pre>
		</div>
		<hr>
		<div class="demo">
			<h3>使用服务器返回Json数据</h3>
			<div id="city_6">
				<select class="prov"></select> <select class="city" disabled="disabled"></select> <select class="dist" disabled="disabled"></select>
			</div>
			<pre>
			$("#city_6").citySelect({ prov : "",city : "",dist : "",nodata : "none",url:$("#serverjson").prop("src")});
			</pre>
		</div>
	</div>
</body>
</html>
